<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script async src="vendor/es-module-shims/es-module-shims.js"></script>
    <script type="importmap">
      {
        "imports": {
          "three": "./vendor/three/three.module.js",
          "three/addons/": "./vendor/three/addons/"
        }
      }
    </script>
    <style>
      html {
        height: 100%;
      }
      @media (prefers-color-scheme: dark) {
        html {
          color-scheme: dark;
        }
      }
      @keyframes shake {
        0% { transform: scaleY(1); }
        20% { transform: scaleY(1); }
        100% { transform: scaleY(0.7); }
      }
    </style>
  </head>
  <body style="margin: 0; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <script type="module">
      import * as THREE from 'three'
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
      // import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

      const scene = new THREE.Scene()

      const light = new THREE.AmbientLight()
      scene.add(light)

      // scene.add(new THREE.AxesHelper(100))

      const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
      camera.position.set(0, 0, 32)

      const renderer = new THREE.WebGLRenderer({ alpha: true })
      window.onresize = () => {
        const sz = Math.min(window.innerWidth, window.innerHeight)
        renderer.setSize(sz, sz)
      }
      window.onresize()
      renderer.outputEncoding = THREE.sRGBEncoding
      renderer.domElement.style = 'transform-origin: center 90%; animation: 0.2s ease-in infinite alternate shake'
      document.body.appendChild(renderer.domElement)

      // const controls = new OrbitControls(camera, renderer.domElement)

      new GLTFLoader().load('model/scene.gltf', gltf => {
        const group = new THREE.Group()

        gltf.scene.rotation.set(0, 2.1, 0)
        gltf.scene.position.set(-12, 0.7, 6)
        group.add(gltf.scene)

        const geometry = new THREE.BufferGeometry()
        const vertices = new Float32Array([
          -6, 0, 0,
          0, 1.2, 0,
          0, -1.2, 0,

          6, 0, 0,
          0, 1.2, 0,
          0, -1.2, 0,
        ])
        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
        const material = new THREE.MeshBasicMaterial({ color: 0x00ffff })
        material.side = THREE.DoubleSide
        material.transparent = true
        material.opacity = 0.4
        for (let x = -1; x <= 1; x += 2) {
          for (let y = -1; y <= 1; y++) {
            const mesh = new THREE.Mesh(geometry, material)
            mesh.rotation.set(0, x * 0.5, x * y * 0.7)
            mesh.position.set(x * 6, y * 5 - 5, -10)
            group.add(mesh)
          }
        }

        scene.add(group)

        function animate() {
          requestAnimationFrame(animate)
          group.rotateY(-0.015)
          // controls.update()
          renderer.render(scene, camera)
        }
        animate()
      }, undefined, err => {
        alert(err)
      })
    </script>
  </body>
</html>
